<template>
  <div style="width: 100%;">
    <div class="top">
      <div class="top-icon">
        <van-icon name="arrow-left" @click="$router.push('/')" />
      </div>
      <div class="top-icon">
        <van-icon name="ellipsis" @click="more" />
      </div>
    </div>
    <div class="div">
      <!-- <iframe
        :src="url"
        id="iframe"
        name="tag"
        :height="height"
        width="100%"
        scrolling="no"
        frameborder="0"
        ref="iframeDom"
        class="iframe"
      ></iframe> -->
      <!-- 更多 -->
      <van-action-sheet v-model="show" title :close-on-click-overlay="false">
        <div class="more">
          <div class="content" @click="copy">
            <div class="icon"></div>
            <span>复制链接</span>
          </div>
          <div class="content" @click="report">
            <div class="icon"></div>
            <span>举报</span>
          </div>
          <div class="content" @click="NoInterest">
            <div class="icon"></div>
            <span>不感兴趣</span>
          </div>
        </div>
        <div style="  display: flex;
        justify-content: center;
        align-items: center;">
          <van-button
            round
            type="primary"
            style="width: 327px; height: 40px; margin: 12px 24px; background-color: #d6d6df; border: 0; color: #303b43;"
            @click="show = false"
          >取消</van-button>
        </div>
      </van-action-sheet>
      <!-- 举报选项 -->
      <div class="NoInterestClass">
        <van-action-sheet
          v-model="reportShow"
          title="举报文章问题"
          :close-on-click-overlay="false"
          @close="closereportShow"
        >
          <van-radio-group v-model="radio">
            <van-cell-group>
              <van-cell title="涉政反动" clickable @click="radio = '1'">
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
              <van-cell title="色情低俗" clickable @click="radio = '2'">
                <template #right-icon>
                  <van-radio name="2" />
                </template>
              </van-cell>
              <van-cell title="血腥暴力" clickable @click="radio = '3'">
                <template #right-icon>
                  <van-radio name="3" />
                </template>
              </van-cell>
              <van-cell title="涉嫌违法犯罪" clickable @click="radio = '4'">
                <template #right-icon>
                  <van-radio name="4" />
                </template>
              </van-cell>
              <van-cell title="赌博、诈骗" clickable @click="radio = '5'">
                <template #right-icon>
                  <van-radio name="5" />
                </template>
              </van-cell>
              <van-cell title="内容不实、谣言" clickable @click="radio = '6'">
                <template #right-icon>
                  <van-radio name="6" />
                </template>
              </van-cell>
              <van-cell title="侵权（抄袭、侵犯名誉等" clickable @click="radio = '7'">
                <template #right-icon>
                  <van-radio name="7" />
                </template>
              </van-cell>
              <van-cell title="疑似侵犯未成年人权益" clickable @click="radio = '8'">
                <template #right-icon>
                  <van-radio name="8" />
                </template>
              </van-cell>
              <van-cell title="已过时效旧闻" clickable @click="radio = '9'">
                <template #right-icon>
                  <van-radio name="9" />
                </template>
              </van-cell>
              <van-cell title="其他问题，我要吐槽" clickable @click="commentShow = true">
                <div>
                  <van-icon name="arrow" />
                </div>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <div
            style="  display: flex;
        justify-content: center;
        align-items: center;"
          >
            <van-button
              round
              type="primary"
              style="width: 327px; height: 40px; margin: 12px auto; background-color: #38cdd8; border: 0; color: #fff;"
              @click="finish"
            >完成</van-button>
          </div>
        </van-action-sheet>
      </div>

      <!-- 我要吐槽 -->
      <div class="comment">
        <van-action-sheet
          v-model="commentShow"
          title="我要吐槽"
          :close-on-click-overlay="false"
          @close="closecommentShow"
        >
          <van-field v-model="commentValue" autosize type="textarea" placeholder="请具体说明问题，我们将尽快处理" />

          <div
            style="
               display: flex;
              justify-content: center;
              align-items: center;"
          >
            <van-button
              round
              type="primary"
              style="width: 327px; height: 40px; margin: 30px auto; background-color: #38cdd8; border: 0; color: #fff;"
              @click="commentfinish"
            >完成</van-button>
          </div>
        </van-action-sheet>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: this.$route.query.url,
      height: "",
      show: false,
      reportShow: false,
      commentShow: false,
      radio: "1",
      commentValue: "",
      timer: null,
     
    };
  },
  watch: {},
  created() {
    // this.openPage();
    window.location.href = this.url
    // console.log(this.url, 22222);
  },
  mounted() {
    // 页面初始化调用函数
    // this.iframeLoad()
    // self.location.href = this.url
    // let iframe = document.getElementById("iframe");
    //先获取iframe元素
    //注意：如果直接获取文档的scrollheight会因为iframe获值的时候突然撑大一下
    //获得的高度明显偏大，所以需要延时获取一下，可以暂时先赋一个值代替下
        let ifreme = document.getElementById("iframe").contentWindow;
        var ifremeDocument = ifreme.document
        const ojb = ifremeDocument.getElementById("news")
        console.log(ojb,'ifremeDocument');

      //  setInterval(() => {
      //     let ifreme = document.getElementById("iframe").contentWindow;
      //   var ifremeDocument = ifreme.document
      //   var height = ifremeDocument.getElementById("news").offsetHeight;
      //   console.log(height,'height');
      // },1000)
  },
  methods: {
    openPage() {
      this.height = document.body.scrollHeight + 100;
      //  console.log(iframe,'iframe');
    
      //   var iframeWindow = iframe.contentWindow
      //   var ifremeDocument = iframeWindow.document
      // var ifremeDocument = document.getElementById("iframe").contentWindow;
   
      //   console.log(ifremeDocument.querySelector('.content').offsetHeight,'ifremeDocument.body.offsetHeight');
      //   this.height = ifremeDocument.querySelector('.content').offsetHeight
    },
    onload(s) {
      console.log(s, "sss");
      function adjustIframeHeight() {
        const iframe = document.getElementById("my-iframe");
        // 替换为你的 iframe 元素的 id
        if (iframe) {
          iframe.style.height =
            iframe.contentWindow.document.documentElement.scrollHeight + "px";
        }
      }
      window.addEventListener("load", adjustIframeHeight);
    },
    more() {
      this.show = true;
    },
    // 不感兴趣
    NoInterest() {
      this.$toast.success("感谢您的反馈");
      this.show = false;
    },
    copy() {
      let inputDom = document.createElement("textarea"); // js创建一个文本框
      document.body.appendChild(inputDom); //将文本框暂时创建到实例里面
      inputDom.value = this.url; //将需要复制的内容赋值到创建的文本框中
      inputDom.select(); //选中文本框中的内容
      inputDom.focus();
      document.execCommand("copy"); //执行复制操作
      document.body.removeChild(inputDom); //最后移出
      this.$toast.success("复制成功");
    },
    //举报
    report() {
      this.reportShow = true;
    },
    closereportShow() {
      this.radio = "1";
    },
    finish() {
      this.show = false;
      this.reportShow = false;
    },

    commentfinish() {
      this.show = false;
      this.reportShow = false;
      this.commentShow = false;
      this.closecommentShow();
    },
    // 关闭触发
    closecommentShow() {
      this.commentValue = "";
    },
    iFrameHeight() {
      function iFrameHeight() {
        var ifm = document.getElementById("iframe");
        var subWeb = document.frames
          ? document.frames["iframe"].document
          : ifm.contentDocument;
        if (ifm != null && subWeb != null) {
          ifm.style.height = "auto"; //关键这一句，先取消掉之前iframe设置的高度
          ifm.style.height = subWeb.body.scrollHeight + "px";
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
::v-deep .van-icon {
  font-size: 22px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: -4px;
  right: 0;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  background-color: #ffffff;
  .top-icon {
    margin: auto 0;
  }
}
.div {
  padding-top: 48px;
}
/deep/ .van-popup {
  //  height: 32.5vh;
}
.more {
  display: flex;
  box-sizing: border-box;
  margin-top: 36px;
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 200px;
    height: 100px;
    .icon {
      width: 40px;
      height: 40px;
      margin-bottom: 8px;
      background-color: aqua;
    }
  }
}
/deep/ .NoInterestClass {
  .van-radio__icon--round {
    .van-icon {
      width: 18px;
      height: 18px;
      font-size: 15px;
    }
  }
  .van-radio__icon--checked .van-icon {
    background-color: #38cdd8 !important;
    border: 0;
  }
  .van-cell::after {
    border-bottom: 0;
  }
}
/deep/ .comment {
  .van-popup {
    height: 300px;
  }
  .van-field__control {
    width: 345px;
    height: 135px !important;
    background-color: #f5f5f5;
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>